<template>
    <div>
        <el-dialog
            :visible.sync="is_show"
            title="上传缴费凭证"
            width="500px"
            center
            @closed="closed"
        >
            <div class="mb10 must-item">缴费凭证</div>
            <div>
                <up-load @upChange="upChange" v-if="is_show"></up-load>
            </div>
            <template slot="footer">
                <el-button @click="is_show = false">取消</el-button>
                <el-button type="primary" v-no-more-click:3000 @click="submit">确认</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import upLoad from '~/components/upLoad'
import axios from "axios"
export default {
    components: {
        upLoad
    },
    data() {
        return {
            baseUrl: global.baseurl,
            is_show: false,
            fee_bill: null,
            order_id: 0
        }
    },
    methods: {
        showOn(data) {
            this.order_id = data.id
            this.is_show = true
        },
        submit() {
            if (!this.fee_bill) {
                return this.$message({
                    type: 'error',
                    message: '请上传缴费凭证'
                })
            }
            let form = new FormData();
            form.append('image', this.fee_bill);
            axios({
                method: "post",
                url: this.baseUrl + `/api/finals/${this.order_id}/upload/pay/image`,
                data: form,
                headers: {
                    "Content-Type": "multipart/form-data",
                    Authorization: "Bearer " + this.$store.state.token
                }
            }).then(res => {
                if (res.data.code==200) {
                    // this.$message({
                    //     type: 'success',
                    //     message: '缴费凭证上传成功，请您耐心等待审核!'
                    // })
                    //
                    this.$alert(`已上传缴费凭证，请您耐心等待管理员的确认。如有疑问可以联系管理员，
                        联系电话：<span class="font_success">13164620214</span>`, '上传缴费截图成功', {
                        confirmButtonText: '确定',
                        center: true,
                        dangerouslyUseHTMLString: true,
                        callback: action => {

                        }
                    })
                    res.data.data.consumer_pay_img = this.baseUrl + '/storage/upload/' + res.data.data.consumer_pay_img
                    this.$emit('refresh')
                    this.is_show = false
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
            }).catch(e => {})
        },
        closed() {
            this.fee_bill = null
        },
        upChange(data) {
            if (data.fileList.length > 0) {
                this.fee_bill = data.fileList[0].raw
            } else {
                this.fee_bill = null
            }
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog {
    .el-dialog__body {
        height: 185px;
    }
    .el-dialog__footer {
        text-align: center
    }
}
</style>
